<template>
	<view class="my_income">
		<view class="income_header">
			<view class="item" :class="active==1?'active':''" @click="change(1)">团队认购订单</view>
			<view class="item" :class="active==2?'active':''" @click="change(2)">团队商城订单</view>
		</view>
		<component :is="currentComponent" />
	</view>
</template>

<script setup>
	import IncomeOne from "@/components/my/IncomeOne.vue";
	import IncomeTwo from "@/components/my/IncomeTwo.vue";
	import {
		ref,
		shallowRef
	} from "vue";

	const currentComponent = shallowRef(IncomeOne);
	const active = ref(1);
	const change = (value) => {
		active.value = value;
		if (value == 1) {
			currentComponent.value = IncomeOne;
		}
		if (value == 2) {
			currentComponent.value = IncomeTwo;
		}
	};
</script>

<style scoped lang="scss">
	.my_income {
		.income_header {
			padding: 40rpx 0 30rpx;
			box-sizing: border-box;
			display: flex;

			.item {
				width: 200rpx;
				height: 60rpx;
				color: #666666;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				border: 2px solid #CCCCCC;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active {
					color: #CA1C1D;
					font-size: 26rpx;
					border: 2px solid #CA1C1D;
					box-sizing: border-box;
				}
			}
		}

		:deep() {
			.scroll_view {
				height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 250rpx);

				.list {
					.item {
						border-radius: 20rpx;
						margin-bottom: 20rpx;
						padding: 20rpx 44rpx 30rpx 20rpx;
						box-sizing: border-box;
						background: #FFFFFF;

						.item_view {
							display: flex;

							.cover {
								width: 160rpx;
								height: 160rpx;
								border-radius: 10rpx;
								background: #EEEEEE;
							}

							.item_info {
								flex: 1;
								padding: 10rpx 0 10rpx 30rpx;
								box-sizing: border-box;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.name {
									line-height: 36rpx;
									color: #333333;
									font-size: 26rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
								}

								.label_view {
									display: flex;

									.label {
										flex: 1;
										color: #666666;
										font-size: 24rpx;
									}
								}

								.time {
									display: flex;

									.key {
										color: #666666;
										font-size: 24rpx;
									}

									.value {
										color: #666666;
										font-size: 24rpx;
										padding-left: 12rpx;
										box-sizing: border-box;
									}
								}
							}
						}

						.cell_view {
							padding-left: 190rpx;
							box-sizing: border-box;
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.cell {
								width: 50%;
								margin-top: 20rpx;
								display: flex;
								overflow: hidden;

								.key {
									color: #666666;
									font-size: 24rpx;
								}

								.value {
									flex: 1;
									color: #CA1C1D;
									font-size: 24rpx;
									white-space: nowrap;
									text-overflow: ellipsis;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
		}
	}
</style>